import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router,Routes,Route,} from "react-router-dom";
import {Provider} from "react-redux"
import "./app.less"
import  router from "./routes/router"
import store from "./redux"
import {
        useQuery,
        useMutation,
        useQueryClient,
        QueryClient,
        QueryClientProvider,
      } from 'react-query'
// import { ReactQueryDevtools } from 'react-query/devtools'
// const queryClient = new QueryClient()
// import { ReactQueryDevtools } from 'react-query-devtools'
function App() {
        // 访问 client
//   const queryClient = useQueryClient()

  // 查询
  /**
   * useQuery 至少需要两个参数
   * 唯一键值和一个Promise函数
   */
//   const query = useQuery('todos', getTodos)

//   // 修改
//   const mutation = useMutation(postTodo, {
//     onSuccess: () => {
//       // 错误处理和刷新
//       queryClient.invalidateQueries('todos')
//     },
//   })
        return (
                // <QueryClientProvider client={queryClient}>
                <div className="content">
                    <Routes>
                {
                        router.map((item)=>
                                <Route
                                key={item.path}
                                path={item.path}
                                element={item.element}
                                // 正常路由
                                >
                                        {
                                                item.children.map(ele=>
                                                        <Route
                                                        key={ele.path}
                                                        path={ele.path}
                                                        element={ele.element}
                                                        >
                                                        </Route>)
                                                        // 嵌套子路由
                                        }
                                </Route>)
                }
                        </Routes>
                        
                </div>
               
        );
}
ReactDOM.render(
<Provider store={store}><Router><App /></Router></Provider>
, document.getElementById("root"));